<template>
	<m-layout title="退换/售后" gap="24">
		<text slot="right" class="right-btn" @click="RefundApply">提交</text>
		<m-block gap="24">
			<view class="from-item">
				<textarea v-model="remark" placeholder-class="placeholder" placeholder="请详细描述您的问题，上传凭证会更快解决" />
				<view class="toast">
					<text>已写</text>
					<text>{{remark.length}}</text>
					<text>个字</text>
				</view>
			</view>
			<uploadPhoto v-model="imgList"></uploadPhoto>
		</m-block>
	</m-layout>
</template>

<script>
	import { AftersellOrderApply } from '@/api/Order.js'
	export default {
		data() {
			return {
				orderId: '',
				remark: '',
				imgList: [],
			};

		},
		onLoad({ orderId }) {
			this.orderId = orderId;
		},
		methods: {
			async RefundApply() {
				if (!this.remark) {
					return this.Toast('请详细描述您的问题')
				}
				if (!this.imgList.length) {
					return this.Toast('请上传售后凭证')
				}
				const { success, msg } = await AftersellOrderApply({
					orderid: this.orderId,
					content: this.remark,
					picurl: this.imgList.toString(),
				})
				this.Toast(msg)
				if (!success) return 
				this.remark = ''
				this.imgList = [];
				setTimeout(() => {
					// this.Jump()
					this.Jump({
						url: '/pages/order/afterSale/afterSale',
						mode: 3
					})
				}, 500)
			},
		},

	}
</script>

<style lang="scss">
	.from-item {
		textarea {
			width: 100%;
		}

		.placeholder {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.toast {
			padding-bottom: 10rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			text:nth-of-type(2) {
				color: #FA2B47;
			}
		}
	}

	.right-btn {
		font-size: 30px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FA2B47;
	}
</style>